<!-- $1 -->
<template>
  <div class="swipe">
    <!-- mint-ui 轮播图 -->
    <mt-swipe :auto="4000">
      <mt-swipe-item v-for="itme in getLunbolist" :key="itme.id">
        <img :src="itme.img_url" />
      </mt-swipe-item>
    </mt-swipe>

    <!-- 六宫格图标 -->
    <ul class="mui-table-view mui-grid-view mui-grid-9">
      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
        <router-link to="/home/newslist">
          <span class="mui-icon mui-icon-home"></span>
          <div class="mui-media-body">新闻资讯</div>
        </router-link>
      </li>
      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
        <a href="#">
          <span class="mui-icon mui-icon-email">
            <span class="mui-badge">5</span>
          </span>
          <div class="mui-media-body">商品列表</div>
        </a>
      </li>
      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
        <a href="#">
          <span class="mui-icon mui-icon-chatbubble"></span>
          <div class="mui-media-body">图片欣赏</div>
        </a>
      </li>
      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
        <a href="#">
          <span class="mui-icon mui-icon-location"></span>
          <div class="mui-media-body">留言反馈</div>
        </a>
      </li>
      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
        <a href="#">
          <span class="mui-icon mui-icon-search"></span>
          <div class="mui-media-body">Search</div>
        </a>
      </li>
      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
        <a href="#">
          <span class="mui-icon mui-icon-phone"></span>
          <div class="mui-media-body">联系我们</div>
        </a>
      </li>
    </ul>

  </div>
</template>

<script>

import { Toast } from "mint-ui";
export default {
  data() {
    return {
      getLunbolist: []
    };
  },
  created() {
    this.getLunbo();
  },
  methods: {
    getLunbo() {
      this.axios.get("/v2/banner").then(res => {        
        if (res.data.code === 1) {
          this.getLunbolist = res.data.data;
        } else {
          Toast("获取轮播图失败");
        }
      });
    }
  }
};
</script>
<style lang='scss' scoped>
.swipe {
  height: 200px;
  .mint-swipe-item {
    img {
      width: 100%;
      height: 100%;
    }
  }
}
.mui-grid-view.mui-grid-9{
  background-color: white;
  border: none;
    img{
      width: 50px;
      height: 50px;
    }
}
.mui-grid-view.mui-grid-9 .mui-table-view-cell{
  border: 0;
  .mui-media-body{
    font-size: 0.85rem;
    
  }
}
</style>